


HoOKs son Funciones que te permiten 
2uganchar” el estado de React y el 
ció de vida desde componentes 
FunciOnalOs . 

Los Hooks no funcionan «dentro de las 


clases, Te permiten usar React sin 
Clases. 


React proporciona algunos Hooks úncor* 
porados como “useState. + 
Use Errect + 
Use Context + 











Durante el renderizado inicial, el estado devuelto 
(state)es el mismo que el var pasado Como 
primer arqumento (ivi: state 
_>La Funcion serStatt se usa para actualizar el 
— taa. Acepta UN muevo sl de estado y 
sita en la cola ma nueva renderización del 
comeonente. 


TO oe (uen State); 





En las renderiza iones siguientes ¡el primer valor 
devuelto por use State será Siempre < estado más 
reciente Dnciol de aplicar las actualizaciones. 





A El arqumento mihalState es el estado uhlizado 


Auranie el Tender wmicial ' En vemderizados 
posteriores, Se Iquora . 








class Contador extends React Component Í 


tan 


constructor (props) ] 
Super (props) ; 
this state = Í 
Count :O p j 
S 
render () 3 
Veturn ( 
<div> 
<p> Hiciste click (His . state.couwtYueces</p > 
< button ontlick=$() => twms «set State (£ count : 
this .state.couut +4 393 > Haz clickt 
<] butron> 


<|div> 
)) 

2 

5 














O 


uporl Venct ¿use State € From yeart 
Funchon Contador ) 3 


const, [couut, set Coumt7- useState (o) 

<dw> 
<p > Micisle dick ¿count? VECES <[p > 

< buliom onClck=3() > setCawmt(tount+4)5> Haz alick! 
<]butorn> 
</diw > 


) 


¿ 
$ 






« Tmportamos use State gue mos permite 0 
mantener Un estado local en un Componente Funcional . 

« Dentro del componente Contador declaramos la 
Variable count (quarda el numero de clicks Y llamando 
al hook useState - La Imicializamos en cero pasando 

(0) como Unico Argumento a 

SetCount nos permite actualizar el count. 


e Cuando el usuario hace cltek llamamos A 
serlount con un nuevo valor. 


Reack actualiza el componente Contador 
pasaándde el muevo valor de count. 
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A: us » de: 
me ) 


Al usar este Hook. le estamos “dicando a React 
que el componente tiene que hacer algo despues 


de renderizarse. React recordard la Función que le 
hemos pasado (hos TEFErimos a ella como uwvestro 
“egecto") y la llamará más tarde despues de 


actualizar el DOM. 








useErrect Equivale a ¡la combinación de : 


+: Component Dicl Mount, 
+ component Did Update, 
+ component Will Unmownt 








0% (ases + 


class friend Statur WihCouuter extends React. Component 
Constructor (frops) $ ns | 
Super (props) 
Ehis. state = S sÚnline ¿Mol 2 


His handle Status Change =this MavdleStatus Chango bunaCtms) j 


Mea o Pio js Couvdk $ VECES" $; 


ShatAPI- Subscribe Tobriend Sta 
nd PrORS - Enend.ta, 
Is Vandle Status Qhawag); ? ¡2 
componer Did Update) £ l 
dovument He = Clickeaste 45 this.state .eount 3 veces) 5 





¡ nt Mil Unw rro) E o 





"e props. AR. sá, 
na handle Staltuc Orange Y, < A 


kh s - set State € 
— CsOnlme status. -IsOnlme 7) 1) 


handle Status Change (stars) E 


renderl) 
te ( L is Online === mn , 


rerum * Loading ...' 
retum Chis. state. as Occlme > ; 
4 
( 


En el Ejemplo Antenor se Avadig Una Funcionalidad : 
Actualizar El Hiulo del ddiumerto com un MEnsa 


personalizado Rue imcluye el nuMEro de clicks. 
Esta lo 





¡ .? 11 - 
.: "> mi 4d 


La ogica de la Suse Pcion (tenemos un Módulo 
Chnaraf que nos Permite soseñbimos pasa Saber 
Si UN Amido 


Ge 


a 


a 


está conectado) s€ cefarte entre 


Ll E JOY 









SE SUSCRIBE 


Se CANCELA LA 
SUSCRIPCIÓN 
$ 


n., ) 








¡ Puedes usar El Hook de Erecto MAS DE 
UNA VEZ! 


Esto MOS Permite Serarar la logica que 
No ESTA rElaciomada Eu diferenres EFECTO 





0 ra ' 
A 


a 





Funchon triendStahur e (pregs) 4 
const [couwt setCouwt]. useState(o), 
use Erredi( (Y => 3 [. 
dotuwevt he = Clickeas te $5 count] VECES; 
$) 
const [isOnlme, setlsómle ]= useState( mot) ; 
cweterd (0 => 
funcion handieStaturCrange(staruv) £ 
sets Onliwe (shatur- IsÓnime) ; 


ChotA21 subscribe ltriend Status (props -rriend.1d, 
handle Sta rur Cha nor); 
return () => 
ChatA?! .unsusorbe Totnend Status (props. Friend ad, 
handle Statux Chano?) 5) 
3y 
Ko 


1 
» 





const value = us eCoitext (My Cont ext) 5 


Ácepta UN OBJETO DE CONTEXTO (el valor devuelto 


de React. ereatelomtext ) Y DEVUEIVE El VALOR DE 
CONTEXTO ACTUAL . 


EL VALOR ACTUAL DEL CONTEXTO ES DETERMINADO 





ASCENDENTEMENTE MÁS CEPEANO En EL ARBOL A 
COMPONENTE QUE HACE LA LLAMADA . 






ASCEUAEMTE MENTE WS CELCAMO 
En sl Arbol SE achualiza , el 
Muok Uva UNA ve Mderilación 
Gon 21 valve, as reciente del 


A. A ado A ese Proveedor 


¡No olvides que el argumento enviado a uselomtert 
debe ser el cto del Contexto en $ mismo: 












S¿puseReducer: ' 
const [state dispatch] = use Peducer (tEduces, Un iROÍArS , WA ; 


Es una altermativa a useState . Acerta Un educar de 
- Xago (state achiom) => newStale y devuelve El Estado 





Actual emtarejado Con un método dispatch 


$ USE Callback : ' 
| Const EDS - use Call back ( 
O => A 
do Something (a,b)35, 





Ta;b1, 
) . 
Vasa u UN en en livea y Un arreglo de debenden” 
seCalibadk devolvera Una versión WEMoOri20da 
de entback que Solo Cambia A una As las defeys 


dencias ha Cambiado - 





+ 


24 useMemo: * 
const memoizod Valve = ue Memo(()> compule Bxyensue Valve (a,b) 
y La, 3); 

Devuelve UM Ale memorzado . 


Pasa una Funeron de “creas” y UN Arreglo de defendencias. 


useMemo solo volverá a Caleulas el valos wemorizado 
tando vna de las dependencias haya cambiado . 


La Función useTlemo Se ejecuta durante El renderizado. 


¿4 use Des: 1 

const cerlontainer < use Res ( vial Valve) 5 
useRes devuelve un objero rer wmutale euya propiedad 
. VusreKÚ se iuetlaliza eon el as umento pasado 


(iwal Valve) . El ob peto devuelto SE Wantenara 
pessistente dusante la Uida completa del Componente. 











Los hooks son Funciones de Java deriPt, pEro VECES ¡tas 
seguir dos 13 las cuando los uses. 


> Llama a los Hooks solo en El nivel surerior “Y 


No Vames Hoolkks dentro de cidos, condicional es o 
Funciones ani dadas . 


MoQuiEndo Esta (sota CE asegurar dE que los Wodks fe 
Vamen on A Mismo Orden Cada vEl QuE Un COMPONENTE 
fe TENÁENTZAO . 


» Llama Hooks solo en funciones de React. — 

No Vames looks desde Funciones Javascript rEQuÍarer - 
Stqmienda esto Egla, te asegurar de que toda la [caco 
del Estado de un aomponenre SES claramente vinmble desde 
Eu códida SUENTE- : 





Hay un plugin de ESLint hamado estu -plogw - 
€ veruerza estas dos regloí - 
ESTE plugan Es incluido por deseo cn Create entr Á 





